import "./index.css";
import { useState } from "react";
import { fetchPost } from "@/api";
import { useNavigate } from "react-router-dom";
import { Button, Form, Input, message } from "antd";
import { UserOutlined, KeyOutlined } from "@ant-design/icons";

function Login() {
    const navigate = useNavigate();
    // 登录按钮loading状态
    const [loading, setLoading] = useState(false);
    // 提交登录
    const loginSubmit = async (values) => {
        setLoading(true);
        let data = {
            account: values.account,
            password: values.password,
        };

        let [res, err] = await fetchPost("/api/login1", {
            data: data,
        });
        if (err) {
            setLoading(false);
        }
        if (res && res.code === 200) {
            localStorage.setItem("userInfo", JSON.stringify(res.data));
            setLoading(false);
            navigate("/home");
        } else {
            message.error(res.message);
            setLoading(false);
        }
    };
    return (
        <div className="P-login">
            <div className="pannel-con">
                <div className="logo-img">
                    <img src="/vite.svg" width="100%" />
                </div>
                <h3>Welcome!</h3>
                <p className="subtext">请登录您的账号</p>
                <Form onFinish={loginSubmit}>
                    <Form.Item name="account" rules={[{ required: true, message: "请输入账号" }]}>
                        <Input prefix={<UserOutlined />} placeholder="请输入您的账号" />
                    </Form.Item>
                    <Form.Item name="password" rules={[{ required: true, message: "请输入密码" }]}>
                        <Input.Password prefix={<KeyOutlined />} placeholder="请输入您的密码" type="password" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" size="large" block={true} loading={loading}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}

export default Login;
